上篇說到了vue-good-table的基本用法，這篇來說一些動態效果。

此篇文章是參考:
點我

搜尋功能

想要搜尋表格內的內容要加上:

      search-options="{
        enabled: true
      }"

     <vue-good-table :rtl="false" :line-numbers="false" max-height="400px" :fixed-header="true"
     :search-options="{
        enabled: true
      }"
     :columns="columns" :rows="rows" >
     </vue-good-table>

若想要按下enter鑑再觸發搜尋，加上trigger: 'enter'

     <vue-good-table :rtl="false" :line-numbers="false" max-height="400px" :fixed-header="true"
     :search-options="{
        enabled: true,
        trigger: 'enter'
      }"
     :columns="columns" :rows="rows" >
     </vue-good-table>

想要在搜尋框無值時有預設字顯示，加上placeholder: '預設字'。

     <vue-good-table :rtl="false" :line-numbers="false" max-height="400px" :fixed-header="true"
     :search-options="{
        enabled: true,
        placeholder: '預設字',
      }"
     :columns="columns" :rows="rows" >
     </vue-good-table>

以往搜尋都是搜尋所有欄位的值有無符合，若想要特定欄位裡的值，則要加searchFn: 連接到的function。
例如我只要搜尋row裡面的name欄位。

     <vue-good-table :rtl="false" :line-numbers="false" max-height="400px" :fixed-header="true"
     :search-options="{
        enabled: true,
        placeholder: '預設字',
        searchFn: uniquesearch
      }"
     :columns="columns" :rows="rows" >
     </vue-good-table>

連接到名為uniquesearch的functuin。
在method加上:

    uniquesearch(row, col, cellValue, searchTerm){
      console.log(row)
      return row.name == searchTerm;
    },

分頁

分頁效果要加上

            :pagination-options="{
              enabled: true,
              mode: 'records'
            }"

mode有兩種模式可以切換，分別為records和pages

      <vue-good-table :rtl="false" :line-numbers="false" :fixed-header="true"
            :pagination-options="{
              enabled: true,
              mode: 'pages',
            }"
          :columns="columns" :rows="rows" >
     </vue-good-table>

也可以調整分頁欄的位置到最上面

      <vue-good-table :rtl="false" :line-numbers="false" :fixed-header="true"
            :pagination-options="{
              enabled: true,
              mode: 'pages',
              position: 'top'
            }"
          :columns="columns" :rows="rows" >
     </vue-good-table>

若要調整顯示筆數要加上perPageDropdown: [數值,數值]。

      <vue-good-table :rtl="false" :line-numbers="false" :fixed-header="true"
            :pagination-options="{
              enabled: true,
              mode: 'pages',
              perPageDropdown: [2,4,6,8],
              position: 'top'
            }"
          :columns="columns" :rows="rows" >
     </vue-good-table>

若要在一開始就在指定頁數要加上setCurrentPage: 指定頁數。

      <vue-good-table :rtl="false" :line-numbers="false" :fixed-header="true"
            :pagination-options="{
              enabled: true,
              mode: 'pages',
              perPageDropdown: [2,4,6,8],
              position: 'top',
              setCurrentPage: 3,
            }"
          :columns="columns" :rows="rows" >
     </vue-good-table>

事件

若我們要點擊該行並取值的話，加上@on-row-click="get"

     <vue-good-table :rtl="false" :line-numbers="false" max-height="400px" :fixed-header="true"
      :search-options="{
        enabled: true,
        placeholder: '預設字',
      }"
      :pagination-options="{
        enabled: true,
        mode: 'pages',
        perPageDropdown: [4,6,8],
        dropdownAllowAll: false,
        setCurrentPage: 1,
      }"
      @on-row-click="get"
     :columns="columns" :rows="rows" >
     </vue-good-table>

method

    get(data){
      console.log(data)
    }

就可以用console.log看到你所點擊的row值